<template>
<!-- 底部菜单栏 -->
  <div id="menuBar">
    <van-tabbar v-model="active" @change="onChange" :placeholder='true' >
      <van-tabbar-item icon="wap-home" to="/">商城首页</van-tabbar-item>
      <van-tabbar-item icon="bag" to="/Case">案例</van-tabbar-item>
      <van-tabbar-item icon="wap-nav" to="/partner">合作商</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart" to="/shopping">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager" to="/personal">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: '',  //默认标签的下标
    }
  },
  methods: {
    // 切换监听事件
    onChange(index) {
      console.log(index)
      // if (index == 0) {
      //   this.$router.push({"path": "/"});
      // } else if (index == 1) {
      //   this.$router.push({"path": "/goods"});
      // } else if (index == 2) {
      //   this.$router.push({"path": "/plate"});
      // } else if (index == 3) {
      //   this.$router.push({"path": "/shopping"});
      // } else if (index == 4) {
      //   this.$router.push({"path": "/personal"});
      // }
    },
  }
}
</script>

<style lang="less" scoped>
// #menuBar {
//   background-color: #666;
// }
/deep/ .van-tabbar-item__icon {
  font-size: 22px;
}
</style>